<script setup>
import UserHeader from '@/components/UserHeader.vue';
import WebFooter from '@/components/WebFooter.vue';
import { ref, computed, onMounted, onUnmounted, onBeforeUnmount } from 'vue'
import { useRoute } from 'vue-router'
import {
  getSingleCareerResourceService,
  likeCareerResourceService
} from '@/api/careerResources'
import { formatISOTime } from '@/utils/format';
import { Histogram, CloseBold } from '@element-plus/icons-vue';
import { useStyleTag } from '@vueuse/core';
import { throttle } from 'lodash-es';

useStyleTag(
  `@import 
  url("//at.alicdn.com/t/c/font_4833919_rrl2tdpq3zh.css");`,
  { id: 'iconfont-career-detail' })// 唯一 ID 防止重复

const route = useRoute()
const article = ref({})
// 明确声明id prop
defineProps({
  resourceId: {
    type: [String, Number],
    required: true
  }
})
// 格式化创建时间或更新时间（优先显示更新时间，如果两者不同）
const formattedUpdateTime = computed(() => {
  if (article.value.updateTime &&
    article.value.updateTime !== article.value.createTime) {
    return `已于 ${formatISOTime(article.value.updateTime)} 修改`;
  } else {
    return `发布于 ${formatISOTime(article.value.createTime)} `;
  }
});
// 包装带样式的文章内容
const wrappedContent = computed(() => {
  const wrapperStyle =
    // 'font-family: Arial, sans-serif; margin: 0 auto; padding: 20px; background-color: #f8f9fa;'
    'font-family: Arial, sans-serif; margin: 0 auto; padding: 20px; '
  return `<div style="${wrapperStyle}">${article.value.content || '测试文字'}</div>`
})
// 定义类型映射数组
const articleTypes = ['职业规划', '行业资讯', '招聘信息'];
// 计算属性
const articleTypeName = computed(() => {
  return articleTypes[article.value.articleType - 1];
});

// 加载文章数据
const loadArticle = async () => {
  const res = await getSingleCareerResourceService(route.params.resourceId)
  article.value = res.data;
  console.log('加载文章数据', article.value);
  document.title = article.value.title || '职业资源详情';

}

// 点赞处理
// 节流处理（每1秒只允许触发一次）
const handleLike = throttle(async () => {
  if (!article.value) return;

  // 先更新UI状态（乐观更新）
  const wasLiked = article.value.isLiked;
  article.value.isLiked = !wasLiked;
  article.value.likeCount += wasLiked ? -1 : 1;

  try {
    await likeCareerResourceService(route.params.resourceId);
  } catch (error) {
    // 请求失败时回滚状态
    article.value.isLiked = wasLiked;
    article.value.likeCount += wasLiked ? 1 : -1;
    console.error('点赞失败:', error);
  }
}, 2000, { leading: true, trailing: false });



//滚动处理
const showToTopBtn = ref(false)
const articleContent = ref(null)
const handleScrollBtn = () => {
  const n = document.documentElement.scrollTop;
  // console.log(articleContent.value.offsetTop);
  showToTopBtn.value = articleContent.value.offsetTop < n ? true : false;
};

const scrollToTop = throttle(() => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
}, 1000);

//从里滚动显示
onMounted(() => {
  loadArticle()
  if (!article.value.title) {
    article.value.title = '测试标题'
  }
  window.addEventListener('scroll', handleScrollBtn);
  document.addEventListener('keydown', handleKeydown)

})
onUnmounted(() => {
  window.removeEventListener('scroll', handleScrollBtn);
})




const showModal = ref(false)
const currentImage = ref('')

// 图片点击处理
const handleImageClick = (e) => {
  if (e.target.tagName === 'IMG') {
    showImageModal(e.target.src)
  }
}

// 显示模态框
const showImageModal = (src) => {
  currentImage.value = src
  showModal.value = true
  // document.body.style.overflow = 'hidden'
}

// 关闭模态框
const closeImageModal = () => {
  showModal.value = false
  document.body.style.overflow = 'auto'
}

// 键盘事件监听
const handleKeydown = (e) => {
  if (e.key === 'Escape' && showModal.value) {
    closeImageModal()
  }
}
onBeforeUnmount(() => {
  document.removeEventListener('keydown', handleKeydown)
})




</script>

<template>
  <UserHeader></UserHeader>
  <div class="main-container">
    <div class="article-container">

      <div class="article-header">
        <div class="article-title-box">
          <h1 class="article-title">{{ article.title }}</h1>
        </div>
        <div class="article-info-box">
          <div class="article-bar-top">
            <router-link target="_blank" :to="{ path: `/my-space/${article.userId}` }" class="follow-nickName">
              {{ articleTypeName }}
            </router-link>

            <el-icon>
              <Histogram />
            </el-icon>
            <span class="time">{{ formattedUpdateTime }}</span>
            <i class="iconfont  icon-view"></i>
            <span class="view">阅读量 {{ article.viewCount }}</span>
            <i class="iconfont  icon-ai45"></i>
            <span class="like_num">点赞数 {{ article.likeCount }}</span>
            <!-- <button class="like-button" @click="handleLike">点赞</button> -->

          </div>
          <div class="blog-tags-box">
            <span>文章标签：</span>
            <a v-for="(item, index) in article.tags" :key="index" href="javascript:;" class="blog-tags">{{ item }}</a>
          </div>
        </div>
      </div>

      <div class="article-content" ref="articleContent" v-html="wrappedContent" @click="handleImageClick"></div>
    </div>
    <div class="right-sidebar-wrap">
      <div class="side-toolbar transition" :class="{ 'on': showToTopBtn }">

        <div class="side-toolbar transition">
          <div class="side-toolbar__box">

            <div class="side-toolbar__action like" @click="handleLike">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path v-if="!article.isLiked" fill-rule="evenodd" clip-rule="evenodd"
                  d="M13.9252 3.04546C13.6432 3.01258 13.382 3.13521 13.2422 3.29868C12.9774 3.60848 12.8705 3.86276 12.7384 4.23799C12.7234 4.28037 12.7082 4.32422 12.6925 4.36961C12.5611 4.74857 12.3929 5.23391 12.044 5.85187C11.446 6.91117 10.8882 7.55173 10.2013 8.154C9.63865 8.6473 9.06639 8.98294 8.5 9.14275V19.7248C9.28689 19.7417 10.1287 19.7525 11 19.7525C13.2468 19.7525 15.1529 19.6812 16.4372 19.615C17.3477 19.5681 18.1379 19.1176 18.5497 18.3851C19.1274 17.3574 19.8396 15.8503 20.2712 14.0753C20.6734 12.4212 20.8569 11.0615 20.9392 10.1025C20.9774 9.65797 20.6256 9.25003 20.08 9.25003H15.0977C14.8476 9.25003 14.614 9.12542 14.4748 8.91775C14.3355 8.71015 14.3089 8.44684 14.4037 8.21557C14.4037 8.21555 14.4037 8.21553 14.4037 8.21551C14.4037 8.21547 14.4038 8.21543 14.4038 8.21539C14.4038 8.21537 14.4038 8.21536 14.4038 8.21534L14.4046 8.21341L14.4085 8.20377L14.4249 8.16256C14.4395 8.12573 14.4609 8.07081 14.4874 8.00089C14.5404 7.86084 14.6131 7.66185 14.6909 7.42856C14.8489 6.95439 15.0177 6.36917 15.0941 5.85681C15.2109 5.07451 15.1824 4.44592 14.8757 3.86439C14.5461 3.23954 14.1724 3.07429 13.9252 3.04546ZM16.164 7.75003H20.08C21.4037 7.75003 22.5555 8.81291 22.4337 10.2309C22.3455 11.2583 22.1508 12.6941 21.7288 14.4297C21.2555 16.3758 20.4798 18.0127 19.8573 19.1201C19.1594 20.3616 17.8654 21.0435 16.5144 21.113C15.21 21.1802 13.2777 21.2525 11 21.2525C8.7933 21.2525 6.77664 21.1846 5.34776 21.1195C3.73985 21.0461 2.39101 19.8517 2.21798 18.2152C2.1042 17.1391 2 15.7467 2 14.2525C2 12.8835 2.08746 11.6418 2.18985 10.6567C2.36874 8.93544 3.84615 7.75003 5.50754 7.75003H7.75C8.06896 7.75003 8.56382 7.59478 9.21241 7.02612C9.77509 6.53279 10.2246 6.0235 10.7378 5.11442C11.0177 4.61868 11.146 4.24973 11.2753 3.87788C11.2913 3.83198 11.3072 3.78604 11.3235 3.73981C11.4791 3.29802 11.6602 2.84083 12.1021 2.32398C12.5582 1.79047 13.3077 1.4633 14.0989 1.55555C14.9248 1.65186 15.6866 2.18668 16.2024 3.16456C16.7233 4.15199 16.7157 5.15349 16.5777 6.07814C16.4916 6.65522 16.3202 7.26593 16.164 7.75003ZM7 19.6835V9.25003H5.50754C4.54442 9.25003 3.77423 9.92257 3.68182 10.8118C3.58359 11.7569 3.5 12.9457 3.5 14.2525C3.5 15.6802 3.59975 17.0179 3.70967 18.0575C3.80099 18.9212 4.51252 19.5798 5.41611 19.621C5.88508 19.6424 6.41785 19.6641 7 19.6835Z"
                  fill="currentColor">
                </path>
                <path v-else fill-rule="evenodd" clip-rule="evenodd"
                  d="M20.3186 7.74998H15.776C15.999 7.26616 16.2333 6.6567 16.3213 6.06668C16.3848 5.64061 16.3909 5.11874 16.3397 4.62199C16.2897 4.1373 16.1773 3.59536 15.9528 3.16982C15.4775 2.26864 14.8233 1.63578 14.0361 1.48224C13.1988 1.31893 12.4779 1.74495 12.0464 2.39778C11.6856 2.94375 11.5449 3.39925 11.4167 3.81444L11.4167 3.81444L11.4125 3.82786C11.2892 4.22696 11.1679 4.61901 10.8559 5.17154C10.3427 6.08056 9.92397 6.55203 9.36125 7.0454C9.071 7.29988 8.77253 7.47246 8.5 7.5831V21.225C9.28742 21.2418 10.1289 21.2524 11 21.2524C13.3441 21.2524 15.3224 21.1759 16.627 21.1071C17.9072 21.0396 19.1311 20.3943 19.7997 19.2217C20.4316 18.1135 21.2409 16.4358 21.7288 14.4296C22.1856 12.5508 22.3761 11.0232 22.4535 9.98474C22.5487 8.70656 21.5102 7.74998 20.3186 7.74998ZM7 21.1842V7.74998H5.30231C3.75929 7.74998 2.38771 8.85084 2.21213 10.4483C2.10046 11.4642 2 12.7852 2 14.2524C2 15.839 2.11749 17.3111 2.23926 18.4118C2.40726 19.9306 3.65916 21.0399 5.15251 21.1103C5.68498 21.1355 6.30853 21.1615 7 21.1842Z"
                  fill="#00A1D6">
                </path>
              </svg>
              <div class="side-toolbar__action__text">{{ article.likeCount }}</div>
            </div>

            <div class="side-toolbar__action favorite">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M10.1617 3.28288C10.9137 1.75922 13.0863 1.75922 13.8383 3.28288L15.5564 6.76404C15.6656 6.9854 15.8768 7.13882 16.1211 7.17432L19.9628 7.73255C21.6442 7.97688 22.3156 10.0432 21.0989 11.2292L18.319 13.9389C18.1423 14.1112 18.0616 14.3595 18.1033 14.6028L18.7596 18.4289C19.0468 20.1036 17.2891 21.3807 15.7851 20.59L12.349 18.7835C12.1305 18.6687 11.8695 18.6687 11.651 18.7835L8.21488 20.59C6.71094 21.3807 4.95321 20.1036 5.24043 18.4289L5.89667 14.6028C5.9384 14.3595 5.85774 14.1112 5.68097 13.9389L2.9011 11.2292C1.68439 10.0432 2.35579 7.97688 4.03724 7.73255L7.87893 7.17432C8.12321 7.13882 8.33439 6.9854 8.44363 6.76404L10.1617 3.28288ZM12.4932 3.94673C12.2915 3.53794 11.7085 3.53794 11.5068 3.94673L9.78874 7.42789C9.461 8.09196 8.82747 8.55224 8.09463 8.65873L4.25294 9.21696C3.80182 9.28251 3.62168 9.8369 3.94812 10.1551L6.72799 12.8648C7.25829 13.3817 7.50027 14.1265 7.37508 14.8563L6.71884 18.6825C6.64178 19.1318 7.11337 19.4744 7.51687 19.2623L10.953 17.4558C11.6085 17.1112 12.3915 17.1112 13.047 17.4558L16.4831 19.2623C16.8866 19.4744 17.3582 19.1318 17.2811 18.6825L16.6249 14.8563C16.4997 14.1265 16.7417 13.3817 17.272 12.8648L20.0519 10.1551C20.3783 9.8369 20.1982 9.28251 19.7471 9.21696L15.9054 8.65873C15.1725 8.55224 14.539 8.09196 14.2113 7.42789L12.4932 3.94673Z"
                  fill="currentColor"></path>
              </svg>
              <div class="side-toolbar__action__text">0</div>
            </div>
            <!-- <el-tooltip content="点击发表回顾" placement="right" effect="light">
            <div class="side-toolbar__action comment">
             <i class="iconfont icon-huigu"></i>
              <div class="side-toolbar__action__text">0</div>
            </div>
          </el-tooltip> -->
          </div>
          <div class="side-toolbar__bottom">
            <div class="side-toolbar__btn backtop" @click="scrollToTop">
              <span>
                <svg width="11" height="7" viewBox="0 0 11 7" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                  class="backtop__icon">
                  <path
                    d="M4.82145 1.12682C5.20459 0.772889 5.79541 0.77289 6.17855 1.12682L10.1175 4.76545C10.786 5.38302 10.3491 6.5 9.43893 6.5H1.56107C0.650938 6.5 0.213979 5.38302 0.882518 4.76545L4.82145 1.12682Z"
                    fill="currentColor"></path>
                </svg>
                顶部
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 使用Teleport将模态框挂载到body -->
  <Teleport to="body">
    <div v-if="showModal" class="image-modal" :style="{ display: showModal ? 'flex' : 'none' }"
      @click.self="closeImageModal">
      <div class="modal-content">
        <div class="close-btn" @click="closeImageModal">
          <el-icon>
            <CloseBold />
          </el-icon>
        </div>
        <img :src="currentImage" class="enlarged-img" />
        <!-- <img src="https://shitu-query-gz.gz.bcebos.com/2025-04-15/00/d2c21cccb3080691?authorization=bce-auth-v1%2F7e22d8caf5af46cc9310f1e3021709f3%2F2025-04-14T17%3A04%3A46Z%2F300%2Fhost%2F0a77ffa0620df96d8caf3b9da2d312abf5c6689fc1b69fd05461428ca1d572d2" class="enlarged-img" /> -->
      </div>
    </div>
  </Teleport>

  <WebFooter></WebFooter>



</template>

<style lang="scss" scoped>
.main-container {
  // background-color: #f7f8fa;
  // padding: 70px 0 24px;
  padding: 24px 0;
  min-height: calc(100vh - 64px); // 减去头部高度
  font-family: 'Microsoft YaHei', sans-serif;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  //     background-color: #f5f5f5;
}

.article-container {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.article-header {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
  // margin-bottom: 30px;

  .article-title-box {
    margin-bottom: 8px;

    .article-title {
      color: #333;
      margin-bottom: 15px;
      font-size: 28px;
      word-wrap: break-word;
      color: #222226;
      font-weight: 600;
      margin: 0;
      word-break: break-all;

    }
  }

  .article-info-box {
    position: relative;
    background: #f8f8f8;
    border-radius: 4px;
    padding: 0 12px;
    padding-bottom: 4px;


    .article-bar-top {
      color: #666;
      font-size: 14px;
      display: flex;
      align-items: center;

      .follow-nickName {
        color: #fff;
        border-radius: 8px;
        margin-right: 10px;
        padding: 0 5px;
        max-width: 150px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        background-color: #f0aea9;

        &:hover {
          color: #fc5531;
        }
      }

      .time {
        margin: 0 4px;
      }

      .icon-view {
        font-size: 18px;
      }

      .view {
        margin: 0 4px;
      }

      .like_num {
        margin: 0 4px;

      }
    }

    .blog-tags-box {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;

      span {
        display: inline-block;
        color: #999aaa;
        font-size: 14px;
      }

      a {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-right: 8px;
        padding: 3px 6px;
        font-size: 12px;
        background-color: #fff;
        color: #5094d5;
        border: 1px solid #eaeaef;
        height: 24px;
        line-height: 17px;
        border-radius: 2px;
        display: inline-block;
      }
    }

  }
}



.article-content {
  line-height: 1.8;
  font-size: 16px;
  color: #444;
  border-radius: 8px;
  background-color: #fff;

  img {
    transition: opacity 0.3s ease;
    background: #f0f0f0;
    /* 加载中的背景色 */
  }
}

.article-content img {
  max-width: 100%;
  height: auto;
  margin: 20px 0;
  border-radius: 4px;
}

.like-button {
  padding: 8px 25px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.like-button:hover {
  background: #40a9ff;
}

.right-sidebar-wrap {
  position: fixed;
  margin-left: 800px;
  transition: .5s ease-in-out;
  top: 44%;
  z-index: 10;


  .side-toolbar__box {
    padding: 12px 6px;

    .side-toolbar__action {
      position: relative;
      cursor: pointer;
      width: 46px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      color: #9499a0;

      .side-toolbar__action__text {
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        margin-top: 4px;
        font-size: 12px;
        line-height: 14px;
      }

      .icon-huigu {
        font-size: 20px;
      }
    }

    /* 为第二个和第三个.side-toolbar__action元素添加上边距 */
    .side-toolbar__action:nth-child(2),
    .side-toolbar__action:nth-child(3) {
      margin-top: 16px;
    }
  }

  .side-toolbar__box,
  .side-toolbar__btn {
    border-radius: 6px;
    background-color: #fff;
  }

  .side-toolbar__bottom {
    position: fixed;
    bottom: 20px;

    .side-toolbar__btn {
      // background-color: pink;
      cursor: pointer;
      width: 58px;
      height: 58px;
      margin-top: 6px;
      padding: 0 17px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      font-size: 12px;
      color: #18191c;
      transition: all .2s;

      span {
        margin-top: 10px;
        position: relative;

        .backtop__icon {
          width: 15px;
          height: 8px;
          position: absolute;
          display: block;
          top: -11px;
          left: 4px;
        }
      }

      &.backtop {
        transition: transform .3s, opacity .3s;
        opacity: 0;
        pointer-events: none;
      }
    }
  }

  .side-toolbar.on .side-toolbar__btn.backtop {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
    cursor: pointer;
  }
}


/* 新增遮罩层样式 */
.image-modal {
  position: fixed !important;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  /*这里使图片居中 */
  justify-content: center;
  align-items: center;
  z-index: 1003;
  /* 图片区域之外显示手指 */
  cursor: pointer;
}

/* 大图容器 */
.modal-content {
  max-width: 90%;
  max-height: 90%;
  position: relative;
  cursor: default;
  /*padding: 40px; /~ 给关闭按钮留出空间 ~/*/
}

/* 关闭按钮 */
.close-btn {
  position: absolute;
  top: -24px;
  right: -22px;
  color: white;
  font-size: 30px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  // text-align: center;
  // line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;





  &:hover {
    transform: rotate(90deg);
  }

}

/* 大图样式 */
.enlarged-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
</style>